<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">       
        <ui:define name="title">
            <h:outputText value="#{bundle.CreateJourneyreservationTitle}"></h:outputText>
        </ui:define>
        <ui:define name="body">
            <h:link value="#{bundle.ViewAllJourneys}" outcome="/journey/List"/>
            <h:panelGroup id="messagePanel" layout="block">
                <p:messages />
            </h:panelGroup>
            <h:form>
                <h:panelGrid columns="2">                    
                    <h:outputLabel value="#{bundle.CreateJourneyreservationLabel_seats}" for="seats" />
                    <h:inputText id="seats"  value="#{journeyreservationController.selected.seats}" title="#{bundle.CreateJourneyreservationTitle_seats}"
                                 validatorMessage="There must be at least one seat">
                        <f:validateLongRange minimum="1" id="seatsValidator" />
                        <f:ajax event="keyup" render="totalsum" listener="#{journeyreservationController.updateTotalSum}"/>
                    </h:inputText>
                    <h:outputLabel value="#{bundle.CreateJourneyreservationLabel_journey}" for="journey" />
                    <h:selectOneMenu id="journey" value="#{journeyreservationController.selected.journey}" 
                                     title="#{bundle.CreateJourneyreservationTitle_journey}" 
                                     required="true"
                                     requiredMessage="Please enter a journey">
                        <f:selectItems value="#{journeyController.itemsAvailableSelectOne}"/>
                        <f:ajax event="change" render="totalsum" listener="#{journeyreservationController.updateTotalSum}"/>
                    </h:selectOneMenu>
                    Start Date: 
                    <p:calendar id="startDate" 
                                value="#{journeyreservationController.selected.startDate}" 
                                pattern="dd/MM/yyyy" showOn="button" required="true"
                                requiredMessage="Please enter a start date">
                        <f:validator validatorId="dateRangeValidator" />
                        <f:attribute name="confirm" value="#{confirm}" />
                        <p:ajax event="dateSelect" update="deposit totalsum" listener="#{journeyreservationController.handleDateSelectStartDate}"/>
                    </p:calendar>
                    End Date: 
                    <p:calendar id="endDate" 
                                value="#{journeyreservationController.selected.endDate}" 
                                pattern="dd/MM/yyyy" showOn="button" required="true"
                                requiredMessage="Please enter a end date" 
                                binding="#{confirm}">
                        <p:ajax event="dateSelect" update="deposit totalsum" listener="#{journeyreservationController.handleDateSelectEndDate}"/>
                    </p:calendar>
                    Deposit: 
                    <h:outputText id ="deposit"
                                  value="#{journeyreservationController.selected.deposit &lt; 0 ? 0 : journeyreservationController.selected.deposit}$" />
                    #{bundle.TotalSum}: 
                    <h:outputText id ="totalsum" 
                                  value="#{journeyreservationController.selected.totalSum &lt; 0 ? 0 : journeyreservationController.selected.totalSum}$"/>
                </h:panelGrid>
                <br />
                <h:commandButton action="#{journeyreservationController.create}" value="#{bundle.CreateJourneyreservationSaveLink}" />
            </h:form>

        </ui:define>
    </ui:composition>

</html>
